<template>
  <div class="dialog_info">
    <el-row class="he100" :gutter="20">
    <el-col :span="6" style='margin-left: 15px;padding-left:0px;padding-right:0px;'>
        <!-- <div class="RightCardTitle CardListTitleL">
        影响总人数 {{peopleNum}} 人
        </div> -->
        <div class="Statistvics_box">
            <div>&nbsp;&nbsp;影响总人数
                <span v-if="!StatistvicsNum || StatistvicsNum.length <= 0">0</span>
                <span v-for="(i,index) in StatistvicsNum" :key="index">{{i}}</span>人
            </div>
        </div>
        <ul class="tranul2" v-if="!ProtectionData || ProtectionData.length <=0 ">
            <template>
                <div slot="no-results" class="noData" style="background-position: center 85%;padding-top: 68%;">暂无数据</div>
            </template>
        </ul>

        <ul class="tranul" v-if="ProtectionData && ProtectionData.length >0 ">
            <li class="tranli" :class="liact==item.index?'tranliact':''"  
            v-for="(item,ind) in ProtectionData" :key="ind" @click.stop="handliclick(item.index)">
                <img v-show="item.index == '>2m'" src="@/assets/newimg/2m.png" alt="" /> 
                <img v-show="item.index == '1m~2m'" src="@/assets/newimg/1-2m.png" alt="" /> 
                <img v-show="item.index == '0.5m~1m'" src="@/assets/newimg/0.5-1m.png" alt="" /> 
                <img v-show="item.index == '<0.5m'" src="@/assets/newimg/0.5m.png" alt="" /> 
                <span>{{item.pcount}}</span>
            </li>
            <!-- <li class="tranli" :class="liact==item.index?'tranliact':''"
                    v-for="(item,ind) in ProtectionData" :key="ind"  @click.stop="handliclick(item.index)">
                <span :class="{'warningYbyj1':item.index == '>2m','warningYbyj2':item.index == '1m~2m','warningYbyj3':item.index == '0.5m~1m','warningYbyj4':item.index == '<0.5m'}"  >{{item.name}}</span>
                <span>{{item.pcount}}</span>
                </li>  -->
        
            <!-- <li class="tranli" :class="liact==0?'tranliact':''" @click.stop="handliclick(0)">
                <img src="@/assets/newimg/2m.png" alt="" /> 
                <span>11</span>
            </li> -->
        </ul> 
    </el-col>
    <el-col class="he100" :span="17">
          <div class="zhouDataTable">
            <!-- <el-table
              border
              v-loading="loading"
              :data="VillageDataList"
              class="flagTable rainLimitTable"
              style="width: 100%;height:100%"
              
            >
              <el-table-column   type="index" width='100' align="center" label="序号" />
              <el-table-column prop="townadnm" align="center" label="乡镇" />
              <el-table-column prop="ewname" align="center" label="预警村庄" />
              <el-table-column prop="housename" align="center" label="户主名称 " />
              <el-table-column prop="pcount" align="center" label="影响人口 " />
             
            </el-table> -->

            <!-- 表格 -->
            <div class="tabel_common tabel_commons">
                <div class="table">
                    <div class="thead">
                    <div class="tr">
                        <div class="th"> 序号 </div>
                        <div class="th"> 乡镇 </div>
                        <div class="th"> 预警村庄 </div>
                        <div class="th"> 户主名称 </div>
                        <div class="th"> 影响人口 </div>
                    </div>
                    </div>
                    <el-scrollbar style="height:40vh; width: 100%;" class="el_scrollbar">
                    <div class="tbody">
                        <template v-if="!VillageDataList || VillageDataList.length <=0 ">
                        <div slot="no-results" class="noData" style="background-position: center 85%;padding-top: 25%;">暂无数据</div>
                        </template>
                        <div v-if=" VillageDataList && VillageDataList.length >0 " class="tr" v-for="(dict,index ) in VillageDataList" :key="index">
                            <!-- :class="['tr', PionId == dict.id ? 'ta' : '']"> -->
                            <div class="td"> {{ index+1 }} </div>
                            <div class="td"> {{ dict.townadnm }} </div>
                            <div class="td"> {{ dict.ewname }} </div>
                            <div class="td"> {{ dict.housename }} </div>
                            <div class="td"> {{ dict.pcount }} </div>
                        </div>
                    </div>
                    </el-scrollbar>
                </div>
            </div>

            <!-- 分页器 -->
            <!-- <div class="page-wrap">
                <el-pagination
                    background
                    prev-text="上一页"
                    next-text="下一页"
                    :page-sizes="pageInfo.sizeList"
                    :current-page="Pageipage"
                    :page-size="Pageirows"
                    :total="VillageDataList.dataCount"
                    layout="total, sizes, prev, pager, next"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div> -->
        
          </div>
    </el-col>
    
     </el-row>
  </div>
</template>

<script>


import {
    GetDetailList,
    
} from '@/api/zyx.js'
export default {
    components: {
        
    },
    mixins: [],
    data() {
        return {
            peopleNum:"0",
            parameter: {},
            VillageDataList: [],
            ProtectionData: [],
            loading: false,
            liact:'',
            StatistvicsNum: [], //影响总人数数字

            // 分页
            zhouDataList: [],
            Pageipage: 1,
            Pageirows: 10,
        }
    },
    created() {
        this.parameter = this.$store.getters.dlgParams.params;
      
        this.GetDetailListdata();
    },
    methods: {
   
        GetDetailListdata() {
            this.loading = true;
            this.ProtectionData = {};
            this.VillageDataList = [];
            this.liact = '';
            //610521109211000 ID=9de84f9a-0f93-4c48-93c6-a509e63f94e8&ewcode=610521109211000
            const params = {
                'ID': this.parameter.ID,//'9de84f9a-0f93-4c48-93c6-a509e63f94e8',//
                'ewcode': this.parameter.ewCode,// '610521109211000',//
               
            };
            GetDetailList(params).then((res) => {
                 this.loading = false
                if (res.isSuccess) {
                    this.ProtectionData = res.data;
                    // this.peopleNum = res.pcount?res.pcount:'0';
                    // console.log('影响',res);
                    this.StatistvicsNum = res.dataCount?(res.dataCount + '').slice(''):'0';
                    this.liact = this.ProtectionData.length?this.ProtectionData[0].index:'';
                    this.VillageDataList = this.ProtectionData.length?this.ProtectionData[0].assessmentClasses:[];
                    
                }
            }).catch(err=>{
               this.loading = false;
            })
        },
      handliclick(ind){
          this.liact = ind;
          let list = this.ProtectionData;
          let arlit = list.filter(item=>{
              return item.index == ind
          });
          
          this.VillageDataList = arlit[0].assessmentClasses;

      }  ,
      /** 显示条数*/
      handleSizeChange(val) {
            this.Pageirows = val
            this.getZhouData()
        },
        /** 翻页*/
        handleCurrentChange(val) {
            this.Pageipage = val
            this.getZhouData()
        }
    }
}
</script>

<style lang="less" scoped>
    .he100{
            //height:100%;
            height: 636px;
        }
	.zhouDataTable {
         height: calc(~"100% - 20px");
         border-left: 1px solid #3F72AA;
		.el-link.el-link--default {
			color: #fff;
		}

		.flagTable .el-table__body tr .cell {
			height: 15px;
			line-height: 15px;
		}

		/deep/ .flagTable th,
		/deep/ .flagTable th,
		.flagTableDiv {
			background: #0a065a;
			color: #fff;
		}

		.el-table--border::after {
			background-color: #14275b;
        }
     /deep/.el-table__empty-text{
		font-size: 16px;
		font-weight: bold;
		color: #fff;
		text-align: center;
	   }
	}
	.dialog_info {
		
      height:calc(~"100% - 45px");
      padding: 8px;
    }
    
    .CardListTitleL {
        color: #ffffff;
        position: relative;
        border-bottom: 2px solid #335875;

        .btnPlay {
            color: #ffffff;
            text-indent: 0;
            position: absolute;
            padding: 0 15px 0 10px;
            line-height: 27px;
            top: 3px;
            right: 0px;
            font-size: 12px;
            background: url("~@/assets/newimg/btnPlay.png") no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
        }
    }
.tranul{
    background-color: rgba(0,165,233,0.2);
   
}
.tranul2{
    height: 500px;
}

  .tranli{
     //padding-left:10px;
     cursor: pointer;
     line-height:36px;
     height:36px;
     padding: 10px;
     //margin: 5px;
     border-bottom: 1px solid #4285A6;
     display: flex;
     justify-content: space-between;
     align-items: center;
     
     span:last-child{
        display: inline-block;
        //float: right;
        margin-right: 30px;
        font-size: 18px;
        font-family: DIN;
        font-weight: bold;
        color: #FFFFFF;
     }
  }

  .tranli:nth-last-child(1){
    border-bottom: none
  }
  .tranliact{
      //background:RGBA(0, 12, 29, 0.8);
  }
  .tranliact{
    box-sizing: content-box;
    background: rgba(0, 150, 255, 0.6);
    border: 1px solid #00D2FF;
    box-shadow: inset 0px 0px 0.75rem rgba(0, 150, 255, 0.6);
    border-bottom: 1px solid #00D2FF !important;
    border-radius: 2px;
}
	
 //左上角样式
 .Statistvics_box {
    height: max-content;
    padding-top: 10px;
    //border-top: 1px solid  #3F72AA;
    display: flex;
    justify-content: center;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    margin-bottom: 10px;
        &>:nth-child(1){
            font-size: 14px;
            line-height: 32px;
            &>span{
                display: inline-block;
                font-size: 24px;
                line-height: 32px;
                font-family: 'Number';
                background: url(~@/assets/newimg/areaNumber.png) no-repeat;
                background-size: 100% 100%;
                padding: 4px 8px;
                margin: 0 4px ;
            }
        }
    } 
</style>
